<template>
  <el-pagination
    v-if="paginationType === 1"
    :page-sizes="[5, 15, 20, 25, 50]"
    :total="props.total"
    layout="total, sizes, prev, pager, next, jumper"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
  <div v-if="paginationType === 2" class="odo-pagination">
    <div class="odo-pagination_main">
      <!-- <input class="odo-pagination_current" type="text" v-model="current" /> -->
      <div class="odo-pagination_poper">
        <div>{{ current }}</div>
        <span> / </span>
        <div class="odo-pagination_total">{{ totalPage }}</div>
      </div>
    </div>
    <div class="odo-pagination_btn" @click="currentChange('prev')">
      <el-icon><ArrowLeftBold /></el-icon>
    </div>
    <div class="odo-pagination_tip" @click="sizeVisible = !sizeVisible">
      {{ props.total }}条
      <ul v-if="sizeVisible">
        <li
          v-for="(item, key) in sizeList"
          :class="{ active: curSize == item }"
          :key="key"
          @click="onPageSize(item)"
        >
          {{ item }}条/页
        </li>
      </ul>
    </div>
    <div class="odo-pagination_btn" @click="currentChange('next')">
      <el-icon><ArrowRightBold /></el-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue'
  const props = defineProps({
    total: {
      type: Number,
      default: 0
    },
    /** 分页显示形式 1：默认框架样式，2：简约模式 */
    paginationType: {
      type: Number,
      default: 1
    }
  })
  type EmitProps = {
    (e: 'currentChange', data: number): void
    (e: 'sizeChange', data: number): void
  }
  const emits = defineEmits<EmitProps>()
  const current = ref(1)
  const curSize = ref(20)
  const sizeVisible = ref(false)
  const sizeList = [5, 10, 20, 25, 50]
  const totalPage = computed(() => {
    const maxPageNum = props.total / curSize.value
    return Number.isInteger(maxPageNum)
      ? maxPageNum
      : Math.floor(maxPageNum) + 1
  })
  const currentChange = (type: 'prev' | 'next') => {
    if (type === 'prev') {
      if (+current.value === 1) return
      current.value = +current.value - 1
    }
    if (type === 'next') {
      if (props.total - +current.value * +curSize.value <= 0) return
      current.value = +current.value + 1
    }
    emits('currentChange', current.value)
  }
  const onPageSize = (size: number) => {
    if (curSize.value !== size) {
      curSize.value = +size
      current.value = 1
      emits('sizeChange', size)
    }
  }
  const handleCurrentChange = (page: number) => {
    emits('currentChange', page)
  }
  const handleSizeChange = (page: number) => {
    emits('sizeChange', page)
  }
</script>

<style scoped lang="scss">
  .odo-pagination {
    display: flex;
    align-items: center;
    padding-top: 3px;
    padding-right: 8px;
    cursor: pointer;
    .odo-pagination_main {
      display: flex;
      align-items: center;
      span {
        display: inline-block;
        margin-right: 4px;
      }
    }
    .odo-pagination_current {
      width: 30px;
      height: 22px;
      padding-inline: 1px;
      padding-right: 4px;
      font-size: 13px;
      line-height: 23px;
      text-align: right;
      border: 0;
      border: 1px solid transparent;
      outline: none;
    }
    .odo-pagination_current:hover {
      cursor: pointer;
      border: 1px solid #cccccc;
      border-radius: 3px;
      transition: all 0.3s;
    }
    .odo-pagination_tip {
      position: relative;
      font-size: 13px;
      ul {
        position: absolute;
        top: -170px;
        left: -35px;
        z-index: 90;
        width: 100px;
        padding: 6px 0;
        font-size: 14px;
        background-color: #ffffff;
        border-radius: 4px;
        box-shadow: 0 0 12px rgb(0 0 0 / 12%);
        li {
          padding: 6px 0;
          color: #495507;
          text-align: center;
        }
        li.active {
          font-weight: bold;
          color: #1e8fa0;
        }
        li:hover {
          background-color: #e9ecef;
        }
      }
    }
    .odo-pagination_poper {
      position: relative;
      display: flex;
      align-items: center;
    }
    .odo-pagination_total {
      font-size: 14px;
      color: #495057;
    }
    .odo-pagination_btn {
      width: 25px;
      height: 27px;
      font-size: 14px;
      line-height: 30px;
      text-align: center;
    }
  }
</style>
